<template>
	<view>
		<view class="">
			
		
			<u-cell-group>
				<navigator url="/pages/users/user_info/index">
					<u-cell-item :title="userInfo"></u-cell-item>
				</navigator>
				<navigator url="/pages/user/setting/modify/modifyPassword">
					<u-cell-item :title="updateLoginPwd"></u-cell-item>
				</navigator>
				<navigator url="/pages/user/setting/modify/modifyBuyPwd">
					<u-cell-item :title="updatePayPwd"></u-cell-item>
				</navigator>
				<u-cell-item :title="languageChange" @click="changeLanguage"></u-cell-item>
				<u-cell-item :title="modeChange" @click="changeNone"></u-cell-item>
				<u-cell-item :title="exitAccount" @click="outLogin"></u-cell-item>
			</u-cell-group>
			
			<view class="">
				<!-- <u-message-input maxlength="5" value="24681"></u-message-input> -->
						<!-- 123 -->
		
			</view>
				
				<u-mask :show="show">
					<view class="warp">
						<!-- <view class="rect"></view> -->
							<!-- :dot-fill="true" -->
							<view class="rect" >
								<view class="close" @click="closeMask">X</view>
								<view class="password">
									{{$t("")}}
								</view>
								<u-message-input :maxlength="6" @change="change" @finish="finish" :focus="true" :value="value"></u-message-input>
									
							</view>
					</view>
				</u-mask>
		</view>
	</view>
</template>
<script>
	import {
		userEdit,
		getLogout
	} from '@/api/user.js';
	export default{
		data(){
			return{
				userInfo: this.$t("personal-settings.user-info"),
				updateLoginPwd: this.$t("personal-settings.update-password"),
				updatePayPwd: this.$t("personal-settings.update-pay-password"),
				languageChange: this.$t("personal-settings.change-language"),
				modeChange: this.$t("personal-settings.pattern-change"),
				exitAccount: this.$t("personal-settings.exit-account"),
				show: false,
				value:''
			}
		},
		methods:{
			onLoad() {
				uni.setNavigationBarTitle({
					title: this.$t("user.personal-settings")
				})
			},
			/**
			 * 退出登录
			 * 
			 */
			outLogin: function() {
				console.log('999');
				let that = this;
				
					uni.showModal({
						title: this.$t("public.tips"),
						content: this.$t("public.confirm-logout"),
						success: function(res) {
							if (res.confirm) {
								getLogout()
									.then(res => {
										that.$store.commit("LOGOUT");
										uni.reLaunch({
											url: '/pages/index/index'
										});
									})
									.catch(err => {
										console.log(err);
									});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				
			},
			changeNone(){
				this.$util.Tips({
					title:this.$t('public.comingSoon'),
				})
			},
			changeLanguage(){
				
				const localeArr = [{
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hant'),
						code: 'zh-Hant'
					}
				];
				const _lArr = localeArr.map((item) => item.text);
				uni.showActionSheet({
					title: this.$t('locale.changeLocale'),
					itemList: _lArr,
					success: (e) => {
						let _data = localeArr[e.tapIndex];
						const systemInfo = uni.getSystemInfoSync();
						const isAndroid = systemInfo.platform.toLowerCase() === 'android';
						if (isAndroid) {
							uni.showModal({
								content: this.$t('index.language-change-confirm'),
								success: (res) => {
									if (res.confirm) {
										this.toChangeLanguage(_data);
									}
								}
							})
						} else {
							this.toChangeLanguage(_data);
						}
					},
				});
				
				
				
			},
			// 进行切换
			toChangeLanguage(data) {
				uni.setLocale(data.code);
				this.$i18n.locale = data.code;
				this.locale = data.text;
				uni.setStorageSync('AppLocale', data);
				uni.setStorageSync('needUpdateTabBar', true);
				
				let route = this.$route
				console.log(route,'route');
				
				uni.redirectTo({
					url:route.fullPath
				})
				
			},
			change(e) {
				this.value = e
							console.log('内容改变，当前值为：' + e);
						},
						finish(e) {
							
							this.value = e
							// this.show = false
							
							console.log('输入结束，当前值为：' + e);
						},
			goBuy(){},
			closeMask(){
				this.value = ''
				this.show = false
			},
			modifyDeal(){
				this.show = true
			}
		}
	}
</script>
<style lang="scss">
	page,
	body {
		height: 100%;
	}
	.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			
		}
	.rect {
		// width: 80%;
		padding: 0  20px;
		height: 200px;
		background-color: #fff;
		.close{
			display: flex;
			justify-content: end;
			padding: 10px;
		}
		.password{
			display: flex;
			justify-content: center;
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 15px;
		}
	}
		
</style>